<template>
  <div class="{{name}}">
    <!-- 页面主体内容 -->
  </div>
</template>

<script setup lang="ts">
  import {
    ref,
    reactive,
    toRefs,
    computed,
    watch,
    onMounted,
    onUpdated,
    onUnmounted,
    getCurrentInstance,
    onActivated,
    onDeactivated,
    onErrorCaptured
  } from "vue";

  defineOptions({
    name: "{{upperAnd_ name}}"
  });
  // 获取当前实例
  const instance = getCurrentInstance();

  // 组件属性列表
  const props = defineProps({
  });

  // 组件内部数据
  const data = reactive({});

  // 计算属性
  const computedProps = computed(() => { });

  // 定义方法
  function method1(p1, p2) { }
  const method2 = (p1, p2) => { };

  // 监听数据变化
  watch(() => { });

  // 生命周期钩子函数
  // 这里定义 mounted 钩子：组件挂载完成后执行。此时DOM节点已创建完成。
  onMounted(() => { });
  // 这里定义 updated 钩子：当组件因响应式状态变化，且该响应式状态更新了视图之后，触发此事件。
  onUpdated(() => { });
  // 这里定义 unmounted 钩子：组件卸载之后调用。通常用于做一下清理工作。
  onUnmounted(() => { });
  // 这里定义 activated 钩子 : 被包含在<keep-alive>中的组件，当组件被插入到 DOM 中时调用。
  onActivated(() => { });
  // 这里定义 onDeactivated 钩子 : 被包含在<keep-alive>中的组件，当组件从 DOM 中被移除时调用。
  onDeactivated(() => { });
  // 这里定义 onErrorCaptured 钩子 : 当捕获一个来自子孙组件的异常时激活此钩子函数
  onErrorCaptured(() => { });
  //自定义emit事件
  defineEmits([]);
</script>



<style lang="scss" scoped>
  /* 这里定义组件的样式 */
  .{{name}}{

  }
</style>
